<style type="text/css">
    .box.platform-tab-box { border-top: 0; }

    .platform-tab { padding: 0; margin: 0; position: relative; }
    .platform-tab li { display: inline-block; height: 36px; line-height: 36px; padding:0; margin: 0 10px; text-align: center; }
    .platform-tab li.current { border-top: 3px solid #333; position: relative; }
    .platform-tab li.current:after { content: ' '; position: absolute; top: 0; left: 50%; margin-left: -4px; border-top: 4px solid #333; border-right: 4px solid #fff; border-left: 4px solid #fff; }

    .platform-tab li a { color: #333; font-size: 14px; font-weight: bold; padding:0 5px; }
    .platform-tab li a b { font-size: 11px; font-weight: normal; }

    .sub-platform-tab { padding: 0; margin: 0; background: #f1f1f1; }
    .sub-platform-tab li { display: inline-block; margin: 0 15px; padding: 6px 0; }
    .sub-platform-tab li a { font-size: 12px; font-weight: bold; }
    .sub-platform-tab li.current a { color: #6441A5; font-weight: bold; text-decoration: underline; }
</style>

<div class="box box-black platform-tab-box">
    <ul class="platform-tab" <{if count($plInfo) < 2}>style="display:none;"<{/if}>>
        <{foreach from=$plInfo item=item key=key}>
            <li class="item platform-tab-item <{if $item.is_current}>current<{/if}>">
                <a href="javascript:;" <{if !empty($item.value)}>platform="<{$item.value}>"<{else}>class="show-sub" sub="<{$key}>"<{/if}> >
                    <{$item.name}>
                    <{if isset($item.name_en)}><b><{$item.name_en}></b><{/if}>
                </a>
            </li>
        <{/foreach}>
    </ul>

    <div>
        <{foreach from=$plInfo item=item key=key}>
            <{if !empty($item.include)}>
            <ul class="sub-platform-tab sub-platform-tab-<{$key}>" <{if !$item.is_current}>style="display:none;"<{/if}>>
                <{foreach from=$item.include item=ii key=kk}>
                <li <{if $kk==$plNav}>class="current"<{/if}>><a href="javascript:;"platform="<{$kk}>"><{$ii}></a></li>
                <{/foreach}>
            </ul>
            <{/if}>
        <{/foreach}>
    </div>
</div>

<script>
    $(function(){
        $('.platform-tab-box a[platform]').click(function(){
            var p = $(this).attr('platform');
            var filter = $('#filter-form');
            filter.find('[name="p"]').val(p);
            filter.find('[name="g"],[name="gameid"],[name="server"]').val('');
            $('#filter-btn').trigger('click');
        })

        $('.platform-tab-box a.show-sub').click(function(){
            setCurrent($(this));
        });

        function setCurrent(the){
            $(".platform-tab-item").removeClass('current');
            the.closest(".platform-tab-item").addClass('current');

            var sub = the.attr('sub');
            $(".sub-platform-tab").hide().filter('.sub-platform-tab-'+sub).show();
        }
    })
</script>